<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />

    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="100px"
      dialogWidth="500px"
      :isHandle="true"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      searchData: {
        orderNo: "",
        sn: "",
        phone: "",
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Order Nnumber",
          prop: "orderNo",
          width: 200
        },
        { type: "input", placeholder: "Device Number", prop: "sn", width: 200 },
        {
          type: "date",
          placeholder: "PaymentStart Date",
          prop: "beginTime",
          width: 190,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "PaymentEnd Date",
          prop: "endTime",
          width: 190,
          change: val => {
            this.searchData.endTime = val;
          }
        },
        { type: "input", placeholder: "UserPhone", prop: "phone", width: 200 }
      ],
      searchHandle: [
        { type: "primary", label: "Search", handle: e => this.getData() }
        // {type:'primary',label:'Reset', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [{}],
      tableCols: [
        { label: "Order Nnumber", prop: "orderNo" },
        // { label: "订单Type", prop: "nickName",  },
        { label: "租借车辆QR Code编号", prop: "nickName" },
        { label: "设备所属信息", prop: "phone" },
        { label: "绑定换电Order Nnumber", prop: "qrCode" },
        { label: "User信息", prop: "userName" },
        { label: "UserPhone", prop: "phone" },
        // { label: "订单Money", prop: "isVip_des",  },
        // { label: "PaymentMoney", prop: "isVip_des",  },
        {
          label: "订单Status",
          prop: "status",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              (row.status == 0
                ? "进行中"
                : row.status == 1
                ? "Completed"
                : row.status == 2
                ? "Overdue"
                : row.status == 3
                ? "有退款"
                : "----") +
              "</p>";
            return html;
          }
        },
        {
          label: "车辆Status",
          prop: "carStatus",
          type: "html",
          html: row => {
            let html =
              "<p>" +
              (row.carStatus == 0
                ? "租借中"
                : row.carStatus == 1
                ? "已Return"
                : row.carStatus == 2
                ? "Not Returned"
                : "--") +
              "</p>";
            return html;
          }
        },
        { label: "Payment时间", prop: "ftime" },
        { label: "Submission Time", prop: "ctime" },
        {
          label: "Operations",
          type: "button",
          width: 200,
          btnList: [
            {
              label: "End Order",
              type: "text",
              handle: row => {
                this.$confirm("确定要End Order吗?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    const res = await this.apis.orderRent_endOrder({
                      id: row.id
                    });
                    this.$message({
                      type: "success",
                      message: "Operations Success!"
                    });
                    this.getData();
                  })
                  .catch(() => {});
              }
            },
            // {
            //   label: 'Order Details',
            //   type: 'text',
            //   handle: (row) => this.goDetail(row.id)
            // },
            {
              label: "更换车辆",
              type: "text",
              handle: row => {
                this.formData.id = row.id;
                this.elFormVisible("更换车辆");
              }
            },
            {
              label: "Return",
              type: "text",
              isShow: row => {
                if (row.carStatus == 2) {
                  return true;
                } else {
                  return false;
                }
              },
              handle: row => {
                this.$confirm("确定已Return吗?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    const res = await this.apis.orderRent_giveBack({
                      id: row.id
                    });
                    this.$message({
                      type: "success",
                      message: "Operations Success!"
                    });
                    this.getData();
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      tableHandles: [
        // {
        //   label: "DataExport",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
      ],
      pagination: { limit: 10, offset: 1, total: 1 },

      checkBox: [],

      formData: {
        id: "",
        deviceId: ""
      },
      formCols: [
        {
          type: "input",
          label: "更换车辆",
          placeholder: "Please Input更换后的车辆ID",
          width: 350,
          prop: "deviceId",
          rmblock: true,
          remark: ""
        }
      ],
      formRules: {
        deviceId: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => {
            this.$refs.elForm.$refs.ruleForm.validate(async valid => {
              if (valid) {
                const res = await this.apis.orderRent_replace(this.formData);

                this.$message({
                  message: "OperationsSuccess！",
                  type: "success"
                });

                this.getData();
              }
            });
          }
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    userDetailsCall() {
      this.userDetailsData.show = false;
    },
    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.orderRent_list({
        orderNo: this.searchData.orderNo,
        sn: this.searchData.sn,
        phone: this.searchData.phone,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });
      console.log(res);
      var list = res.rows || [];
      this.tableData = list;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
